<template>
  <div class="container fixed"  :class="{'backgroundColor':type == 'ti' || type == 'zhuan','backgroundColor1':type == 'chong'}">
    <Header
      @seleTab="seleTab"
      :showTab="true"
      :type="type"
      @right="right"
      :showRightImg="true"></Header>
    <div style="padding: 10px 0;">
      <!--<scroller-->
        <!--:pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"-->
        <!--:pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"-->
        <!--lock-x-->
        <!--height="-46"-->
        <!--ref="recharge"-->
        <!--@on-pullup-loading="onScrollBottom()"-->
        <!--:use-pullup="true"-->
        <!--:use-pulldown="true"-->
        <!--@on-pulldown-loading="onScrollTop()"-->
      <!--&gt;-->
        <div class="myChangeContain backgroundColor" v-if="type == 'chong'">
          <div class="center qrcode">
            <qrcode :value="address" type="img"></qrcode>
          </div>
          <div style="text-align: center;margin-top: 12px;">
            <SeleDown
              :list="list"
              :current="current"
              from="chongCoin"
              @chongCoin="chongCoin"></SeleDown>
          </div>
          <div class="line">
            <span style="left:-41px;box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.30);"></span>
            <span style="right:-41px;box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.30);"></span>
          </div>
          <div class="login">
            <div class="font15" style="color: #C3C3C8;margin-bottom: 10px;">
              充币地址
            </div>
            <div style="word-break: break-all;color:#FFFFFF;margin-bottom: 25px;" class="font16">
              <span>{{address}}</span>
            </div>
            <!--<div id="address" style="opacity: 0;position: absolute;left: -1000px;">{{address}}</div>-->
            <input type="text" readonly id="address" style="opacity: 0;position: absolute;left: -1000px;" v-model="address">
            <x-button
              type="primary"
              :mini="false"
              @click.native="copy('address')"
              style="padding: 0 30px;"
              class="address"
              data-clipboard-action="copy"
              data-clipboard-target="#address"
            >复制地址</x-button>
            <div v-if="current.mark == 'EOS'">
              <div style="word-break: break-all;color:#FFFFFF;margin:10px 0;" class="font16">
                {{address_id}} (Memo)
              </div>
              <input type="text" readonly id="Memo" style="opacity: 0;position: absolute;left: -1000px;" v-model="address_id">
              <x-button
                type="primary"
                :mini="false"
                ref="copy"
                @click.native="copy('Memo')"
                style="padding: 0 30px;"
                class="Memo"
                data-clipboard-action="copy"
                data-clipboard-target="#Memo"
              >复制Memo</x-button>
            </div>
          </div>
        </div>
        <div v-if="type == 'ti'" style="padding:30px 21px;background: #292A3A;">
          <div class="flexLeft" style="margin-bottom: 10px;">
          <span style="margin-right: 15px;" class="font15">
            币&nbsp;&nbsp;&nbsp;种
          </span>
            <SeleDown
              :list="list"
              :current="current"
              from="coin"
              @coin="coin"></SeleDown>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">类&nbsp;&nbsp;&nbsp;型</span>
            <SeleDown
              :list="tiTypeList"
              from="tiType"
              :current="tiCurrentList"
              @tiType="tiType"></SeleDown>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;position: relative;">
            <span style="margin-right: 15px;" class="font15">地&nbsp;&nbsp;&nbsp;址</span>
            <group class="tibi" >
              <x-input v-model="tiAddress" placeholder="" title="">
                <img slot="right" src="../assets/img/arrDown.png" style="width: 14px;" @click="tishowDown"/>
              </x-input>
            </group>
            <div
              v-if="showDown"
              style="position: absolute;top: 47px;right: 0;width: calc(100% - 60px);z-index: 2;background: #424252;border-radius: 3px;">
              <div v-for="item in addressList"
                   style="height: 44px;line-height: 44px;border-bottom: 1px solid #3A3A47;padding: 0 10px;" @click="seleAddress(item.address)">{{item.address}}</div>
            </div>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">数&nbsp;&nbsp;&nbsp;量</span>
            <group class="tibi">
              <x-input v-model="itNum" @on-change="inputNum" :placeholder="'最小提'+current.takeout_min + current.mark" title="">
                <span slot="right" class="font13" style="color: #AF8CFF;" @click="allAmount"> 全部转出</span>
              </x-input>
            </group>
          </div>
          <div style="text-align: right;margin-top: -5px;margin-bottom: 5px;" class="font13">
            <!--<span>最小提{{current.takeout_min}} {{current.mark}} &nbsp;</span>-->
            <!--<span>最大提{{current.takeout_max}} {{current.mark}} &nbsp;</span>-->
            <span>剩余 {{current[tiCurrentList.name]}} {{current.mark}}</span>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">验证码</span>
            <group class="tibi">
              <x-input v-model="code" placeholder="" title="">
                <span
                  slot="right"
                  class="font13"
                  @click="getCode"
                  :class="{defaultColor:!codeDisabled,disabledColor:codeDisabled}">{{codeContent}}</span>
              </x-input>
            </group>
          </div>
          <div class="login">
            <x-button type="primary" @click.native="tibiSubmit" :disabled="disabled">确定提币</x-button>
          </div>
          <div class="font13" style="color:#F5646E;margin-top: 13px;">每次提币将收取{{fee}}%的手续费</div>
        </div>
        <div v-if="type == 'zhuan'" style="padding:30px 21px;background: #292A3A;">
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">
              币&nbsp;&nbsp;&nbsp;种
            </span>
            <SeleDown
              :list="list"
              :current="current"
              from="zhuancoin"
              @zhuancoin="zhuancoin"></SeleDown>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">类&nbsp;&nbsp;&nbsp;型</span>
            <SeleDown
              :list="zhuanTypeList"
              from="zhuanType"
              :current="zhuanCurrentList"
              @zhuanType="zhuanType"></SeleDown>
          </div>
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">转&nbsp;&nbsp;&nbsp;入</span>
            <group class="tibi">
              <x-input v-model="zhuanRuType" placeholder="本金" title="" readonly>
              </x-input>
            </group>
          </div>
          <!--<div class="flexLeft" style="margin-bottom: 10px;position: relative;">-->
            <!--<span style="margin-right: 15px;" class="font15">地&nbsp;&nbsp;&nbsp;址</span>-->
            <!--<group class="tibi" >-->
              <!--<x-input v-model="tiAddress" placeholder="" title="">-->
                <!--<img slot="right" src="../assets/img/arrDown.png" style="width: 14px;" @click="tishowDown"/>-->
              <!--</x-input>-->
            <!--</group>-->
            <!--<div-->
              <!--v-if="showDown"-->
              <!--style="position: absolute;top: 47px;right: 0;width: calc(100% - 60px);z-index: 2;background: #424252;border-radius: 3px;">-->
              <!--<div v-for="item in addressList"-->
                   <!--style="height: 44px;line-height: 44px;border-bottom: 1px solid #3A3A47;padding: 0 10px;" @click="seleAddress(item.address)">{{item.address}}</div>-->
            <!--</div>-->
          <!--</div>-->
          <div class="flexLeft" style="margin-bottom: 10px;">
            <span style="margin-right: 15px;" class="font15">数&nbsp;&nbsp;&nbsp;量</span>
            <group class="tibi">
              <x-input v-model="zhuanNum" @on-change="inputzhaunNum" placeholder="" title="">
                <span slot="right" class="font13" style="color: #AF8CFF;" @click="allAmount('zhuan')"> 全部转出</span>
              </x-input>
            </group>
          </div>
          <div style="text-align: right;margin-top: -5px;margin-bottom: 5px;" class="font13">剩余 {{current[zhuanCurrentList.name]}} {{current.mark}}</div>
          <!--<div class="flexLeft" style="margin-bottom: 10px;">-->
            <!--<span style="margin-right: 15px;" class="font15">验证码</span>-->
            <!--<group class="tibi">-->
              <!--<x-input v-model="code" placeholder="" title="">-->
                  <!--<span-->
                    <!--slot="right"-->
                    <!--class="font13"-->
                    <!--@click="getCode"-->
                    <!--:class="{defaultColor:!codeDisabled,disabledColor:codeDisabled}">{{codeContent}}</span>-->
              <!--</x-input>-->
            <!--</group>-->
          <!--</div>-->
          <div class="login">
            <x-button type="primary" @click.native="zhuanbiSubmit" :disabled="disabledzhuan">确定转账</x-button>
          </div>
        </div>
      <!--</scroller>-->
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import Copy from './common/copy.vue'
  import Clipboard from 'clipboard';
  import SeleDown from './common/seleDown.vue'
  import {Qrcode, XInput, Group,Scroller} from 'vux'
  export default{
    data(){
      return {
        zhuanRuType:'',
        qrcode: '',
        list:[],
        type:'chong',
        disabled:false,
        disabledzhuan:false,
        value:'',
        current:{},
        from:'chongCoin',
        tiTypeList:[{mark:'本金',id:1,name:'balance',feeName:'balance_fee'},{mark:'捐助收益',id:2,name:'invest',feeName:'invest_fee'},{mark:'推广收益',id:3,name:'extend',feeName:'extend_fee'},{mark:'分红收益',id:4,name:'bonus',feeName:'bonus_fee'}],
        tiCurrentList:{mark:'本金',id:1,name:'balance',feeName:'balance_fee'},
        zhuanTypeList:[{mark:'捐助收益',id:1,name:'invest',feeName:'invest_fee'},{mark:'推广收益',id:2,name:'extend',feeName:'extend_fee'},{mark:'分红收益',id:3,name:'bonus',feeName:'bonus_fee'}],
        zhuanCurrentList:{mark:'捐助收益',id:1,name:'invest',feeName:'invest_fee'},
        tiAddress:'',
        showDown:false,
        itNum:'',
        zhuanNum:'',
        code:'',
        fee:'',
        addressList:[],
        onFetching:false,
        onFetching1:false,
        currentId:'',
        codeContent:'发送验证码',
        codeDisabled:false,
        address:'',
        address_id:'',
        showAddress:false
      }
    },
    methods: {

      onScrollBottom(){
        if (this.onFetching) {} else {
          this.$nextTick(() => {
            this.$refs.recharge.donePulldown();
            this.$refs.recharge.disablePullup();
          })
          this.onFetching = false;
          this.onFetching1 = false;
        }
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
//          this.walletlist();
        }
        this.walletlist();
      },
      right(){
        this.$router.push('/myChargeRecord')
      },
      inputNum(value){
        if(Number(value) > Number(this.current[this.tiCurrentList.name])){
          this.$nextTick(()=>{
            this.itNum = this.current[this.tiCurrentList.name];
          })
        }else{
          var arr = String(value).split('.');
          if(arr[1]){
            if(this.current['accuracy'] != 0){
              var value1 = arr[0] + '.' + arr[1].substring(0,this.current['accuracy']);
            }else{
              var value1 = arr[0];
            }
            this.$nextTick(()=>{
              this.itNum = value1;
            })
          }
        }
      },
      inputzhaunNum(value){
        if(Number(value) > Number(this.current[this.zhuanCurrentList.name])){
          this.$nextTick(()=>{
            this.zhuanNum = this.current[this.zhuanCurrentList.name];
          })
        }else{
          var arr = String(value).split('.');
          if(arr[1]){
            var value1 = arr[0] + '.' + arr[1].substring(0,this.current['accuracy']);
            this.$nextTick(()=>{
              this.zhuanNum = value1;
            })
          }
        }
      },
      allAmount(type){
        if(type == 'zhuan'){
          this.zhuanNum = this.current[this.zhuanCurrentList.name];
          return
        }
        this.itNum = this.current[this.tiCurrentList.name];
      },
      tishowDown(){
        this.showDown = !this.showDown;
        if(this.showDown){
          this.history(this.current.aid)
        }
      },
      seleAddress(data){
        this.tiAddress = data;
        this.showDown = false;
      },
      coin(data){
        if(data.takeout == 0){
          this.toastFn('暂不开放提币功能')
          return
        }
        this.current = data;
        this.itNum = '';
        this.fee = this.current[this.tiCurrentList.feeName];
      },
      zhuancoin(data){
        if(data.takeout == 0){
          this.toastFn('暂不开放提币功能')
          return
        }
        this.current = data;
        this.zhuanNum = '';
      },
      tiType(data){//本金 捐助 推广
        this.tiCurrentList = data;
        this.itNum = '';
        this.fee = this.current[this.tiCurrentList.feeName];
      },
      zhuanType(data){
        this.zhuanCurrentList = data;
      },
      chongCoin(data){
        this.current = data;
        this.address = data.address;
        this.address_id = data.address_id;
        this.currentId = this.current.aid;
        if(!this.current.address){
          this.getaddress(this.current.aid);
        }
      },
      seleCoin(){
        this.goTo({name: 'addressList', params: {coin: this.symbol, currency_id: this.currency_id}})
      },
      goTo(path, allow){
        if (allow === 0) {
          this.toastFn('暂不开放', '', '', '', 1000)
          return
        }
        this.$router.push(path)
      },
      copy(index){
        var that = this;
        this.copyBtn = new Clipboard('.'+index);
        let clipboard = this.copyBtn;
        clipboard.on('success',(res)=> {
          that.toastFn('复制成功','','success');
          clipboard.destroy();
        })
        clipboard.on('error', ()=>{
          that.toastFn('复制失败，请手动复制');
          clipboard.destroy()
        })
      },
      copySuccess(){
      },
      seleTab(type){
        this.type = type;
        this.findCurrent();
      },
      zhuanbiSubmit(){
//        if(!this.zhuanNum || this.zhuanNum<=0){
//          this.toastFn('请输入金额');
//          return
//        }
        this.disabledzhuan = true;
        this.service('carry',{
          area:this.current.aid,
          type:this.zhuanCurrentList.id,
          numbers:this.zhuanNum,
          toaddress:1
        },'post').then(res=>{
          this.disabledzhuan = false;
          if(res.code == 200){
            this.toastFn(res.msg,'','success')
            this.$router.push('/purse');
            return
          }
          this.toastFn(res.msg);
        })

      },
      tibiSubmit(){
        if(!this.tiAddress){
          this.toastFn('请输入地址');
          return
        }else if(!this.itNum || this.itNum<=0){
          this.toastFn('请输入金额');
          return
        }else if(this.itNum < this.current.takeout_min){
          this.toastFn('金额不能小于' + this.current.takeout_min);
          return
        }else if(this.itNum > this.current.takeout_max){
          this.toastFn('金额不能大于' + this.current.takeout_max);
          return
        }else if(!this.code){
          this.toastFn('请输入验证码');
          return
        }
        this.disabled = true;
        this.service('takeout',{
          area:this.current.aid,
          type:this.tiCurrentList.id,
          address:this.tiAddress,
          numbers:this.itNum,
          smscode:this.code
        },'post').then(res=>{
          this.disabled = false;
          if(res.code == 200){
            this.toastFn(res.msg,'','success')
            this.$router.push('/purse');
            return
          }
          this.toastFn(res.msg);
        })
      },
      getaddress(id){
        this.service('getaddress',{
          area:id
        },'post').then(res=>{
          if(res.code == 200){
            this.address = res.data.address;
            this.address_id = res.data.address_id;
            this.walletlist();
          }
        })
      },
      setInter(){
        var count = 60;
        this.codeContent = count + 's';
        this.codeDisabled = true;
        this.timer = setInterval(()=>{
          count--;
          this.codeContent = count + 's';
          if(count<=0){
            clearInterval(this.timer);
            this.codeDisabled = false;
            this.codeContent = '发送验证码';
          }
        },1000)
      },
      getCode(){
        if(this.codeDisabled){
          return;
        }
        this.codeDisabled = true;
        this.service('smscode',{
          phone:localStorage.getItem('token')
        },'post').then(res=>{
          if(res.code== 200){
            this.toastFn(res.msg,'','success');
            this.setInter()
            return
          }
          this.codeDisabled = false;
          this.toastFn(res.msg);
        })
      },
      history(id){
        this.service('history',{
          area:id
        },'post').then(res=>{
          this.addressList = res.data.list;
        })
      },
      findCurrent(){
        for(var i=0;i<this.list.length;i++){
          if(this.list[i].aid == this.$route.params.id){
            this.current = this.list[i];
            break;
          }
        }
      },
      walletlist(){
        this.loading(true)
        this.service('walletlist',{},'post').then(res=>{
          this.loading(false)
          if(res.code == 200){
            this.list = res.data.list;
            this.findCurrent();
//            for(var i=0;i<res.data.list.length;i++){
//              if(res.data.list[i].aid == this.$route.params.id){
//                this.current = res.data.list[i];
//                break;
//              }
//            }
            this.fee = this.current[this.tiCurrentList.feeName];
            if(!this.current.address){
              this.getaddress(this.current.aid)
            }else{
              this.address_id = this.current.address_id;
              this.address = this.current.address;
            }
//            this.$nextTick(() => {
//              this.$refs.recharge.donePulldown();
//              this.$refs.recharge.disablePullup();
//            })
//            this.onFetching = false;
//            this.onFetching1 = false;
          }
        })
      }
    },
    created(){
        this.currentId = this.$route.params.id;
        this.onScrollTop();
    },
    filters:{
      rechargeAdd(data){
        return 'tb'+data.substring(2);
      }
    },
    components: {
      Header,
      Qrcode,
      XInput,
      Group,
      Copy,
      SeleDown,
      Clipboard,
      Scroller
    }
  }
</script>
<style>
  .myChangeContain {
    margin: 10px 20px;
    padding: 26px 25px 40px 25px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.30);
    border-radius: 10px;
  }
  .line {
    border: 1px dashed #424252;
    margin: 29px 0;
    position: relative;
  }
  .qrcode img{
    border:8px solid #ffffff;
    border-radius: 5px;
  }
  .line > span {
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1F1F28;
    top: -15px;
  }
  .tibi{
    width: calc(100% - 60px);
  }
  .tibi .weui-cell{
    padding-left:10px;
    padding-right: 10px;
    background: #424252;
    height: 44px;
    margin-bottom: 0;
    border:1px solid #494956;
  }
  .tibi .weui-cells{
    background: none;
    margin-top:0
  }
  .tibi .weui-cells:before,.tibi .weui-cells:after{
    border: none;
  }
</style>
